<template>
  <div class="engine-out-frame">
    <Card class="data-card">
      <template slot="title">
        <p>工程中心</p>
      </template>
      <template slot="extra">
        <Button type="primary" @click="createBtn" icon="md-add">
          创建工程
        </Button>
      </template>
      <data-summary></data-summary>
      <project-material-info></project-material-info>
      <div class="split-line"></div>
      <security-data-info></security-data-info>
      <div class="split-line"></div>
      <engine-list @on-change="onChange"></engine-list>
    </Card>
  </div>
</template>

<script>
  import TaskClass from "../component/taskClass/TaskClass";
  import DataSummary from "../component/engine/DataSummary";
  import ProjectMaterialInfo from "../component/engine/ProjectMaterialInfo";
  import SecurityDataInfo from "../component/engine/SecurityDataInfo";
  import EngineList from "../component/engine/EngineList";
  import {mapActions} from 'vuex';
  export default {
    name: "EngineDataInfo",
    components: {EngineList, SecurityDataInfo, ProjectMaterialInfo, DataSummary, TaskClass},
    data() {
      return {
        selectedType: 'port-2-engine'
      }
    },
    methods: {
      createBtn() {
        let _this = this;
        this.$router.push({
          path: '/operate-engine',
          query: {projectType: this.selectedType}
        })
      },
      onChange(type) {
        this.selectedType = type;
      }
    },
    mounted() {
      if (this.$route.query !== undefined && this.$route.query.type !== undefined) {
        this.selectedType = this.$route.query.type;
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../styles/common";

  /deep/ .data-card .ivu-card-head p {
    font-size: 18px;
  }

  .engine-out-frame {
    margin-top: 125px;
    margin-bottom: 30px;
    width: 100%;
    .data-card {
      width: 1200px;
      margin: 0 auto;
    }
  }
</style>
